<template>
  <div class="subject-container">
    <el-card>
      <div class="box">
        <el-form :inline="true" ref="searchForm" :modle="searchForm">
          <div class="left">
            <el-form-item label="学科名称" :model="searchForm">
              <el-input  @keyup.enter="handleFilter" v-model="searchForm.subjectName"></el-input>
            </el-form-item>
            <el-button size="medium" @click="resetFrome">清除</el-button>
            <el-button size="medium" type="primary" @click="handleFilter"
              >搜索</el-button
            >
          </div>
        </el-form>
        <div class="right">
          <el-button size="medium" type="success" @click="addSubjeck"
            ><i class="el-icon-edit"></i>新增学科</el-button
          >
        </div>
      </div>

      <!-- 消息提示部分 -->
      <el-alert
        :title="`共 ${this.total} 条记录`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="subjectName" label="学科名称" width="120">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="220">
          <template slot-scope="scope">{{
            formDate(scope.row.addDate)
          }}</template>
        </el-table-column>
        <el-table-column label="前台是否显示" width="120">
          <template slot-scope="scoped">{{
            formFrontDisplay(scoped.row.isFrontDisplay)
          }}</template>
        </el-table-column>
        <el-table-column prop="creatorID" label="二级目录" width="120">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="120">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="$router.push(`directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)" type="text" size="medium"
              >学科分类</el-button
            >
            <el-button type="text" size="medium" @click="handleLable(scope.row)"
              >学科标签</el-button
            >
            <el-button type="text" size="medium" @click="editHandle(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="medium"
              @click="delectHandle(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <PageTool
          :paginationPage="queryObj.page"
          :paginationPagesize="queryObj.pagesize"
          :total="total"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        >
        </PageTool>
      </div>
    </el-card>

    <!-- 新增学科弹窗 -->
    <el-dialog title="新增学科" :visible.sync="dialogFormVisible" width="30%">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="新增学科" prop="subjectName">
          <el-input
            v-model="addForm.subjectName"
            style="width: 80%"
            placeholder="请输入学科名称"
          />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="addForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="hSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改学科"
      :visible.sync="editDialogFormVisible"
      width="30%"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="editForm.subjectName"
            style="width: 80%"
            placeholder="请输入学科名称"
          />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="editForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PageTool from '@/module-manage/components/page-tool'
import { list, add, remove, update } from '@/api/hmmm/subjects'
// 导入 dayjs, 格式化时间
import dayjs from 'dayjs'

export default {
  components: {
    PageTool
  },
  data () {
    return {
      tableData: [],
      searchForm: {
        subjectName: ''
      },
      dialogFormVisible: false,
      editDialogFormVisible: false,
      total: '1',
      queryObj: {
        page: 0,
        pagesize: 10
      },
      addForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      editForm: {
        id: '',
        subjectName: '',
        isFrontDisplay: true
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      //   value1:true,
      row: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    //   获取学科详情列表数据
    async getList () {
      const res = await list(this.queryObj)
      //   console.log(res.data, 111)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 新增学科
    addSubjeck () {
      this.dialogFormVisible = true
    },
    hSubmit () {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          const res = await add(this.addForm)
          if (res.status === 200) {
            this.$message.success('添加成功!')
            this.getList()
            this.dialogFormVisible = false
          }
        }
      })
    },

    // 修改学科
    editHandle (row) {
      this.editDialogFormVisible = true
      console.log(row, 444)
      this.editForm.id = row.id
      this.editForm.subjectName = row.subjectName
      //   console.log(row.isFrontDisplay, 4444)
      this.editForm.isFrontDisplay = Boolean(row.isFrontDisplay)
    },

    // 修改学科确认
    async editSubmit () {
      this.editDialogFormVisible = false
      const result = await update(this.editForm)
      if (result.status === 200) {
        this.$message.success('修改成功!')
        this.getList()
        this.dialogFormVisible = false
      }
    },

    // 清空搜索框内容
    resetFrome () {
      this.searchForm.subjectName = ''
      this.getList()
    },

    // 搜索
    handleFilter () {
      console.log(this.queryObj, 4444)
      this.queryObj = this.searchForm
      this.getList()
    },

    // 学科分类
    handleClick (row) {
      // 路由跳转
      this.$router.push({
        name: 'subjects-directorys',
        query: { id: row.id, name: row.subjectName }
      })
      //   console.log(row);
    },

    // 学科标签
    handleLable (row) {
      // 路由跳转
      this.$router.push({
        name: 'subjects-tags',
        query: { id: row.id, name: row.subjectName }
      })
    },

    // 每页显示信息条数
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      if (this.queryObj.page === 1) {
        this.getList(this.queryObj)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.queryObj.page = val
      console.log(444)
      this.getList()
    },

    // 删除
    async delectHandle (id) {
      // 显示对话框
      const res = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // 判断是否确认删除
      if (res === 'confirm') {
        const result = await remove({ id })
        //   console.log(result.status, 222);
        if (result.status === 200) {
          this.$message.success('删除成功!')
          this.getList()
        }
      }
    },

    // 前台数据格式化
    formFrontDisplay (num) {
      if (num === 1) {
        return '是'
      } else if (num === 0) {
        return '否'
      }
    },

    // 格式化时间
    formDate (data) {
      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="scss">
.subject-container {
  padding: 10px 10px;
}
.box {
  display: flex;
  justify-content: space-between;
}
.pagination-container {
  text-align: right;
}
</style>
